<template>
        <div class="login">
            <div class="login-title">
            <div class="bezef">
                <div class="title" >XX管理系统</div>
                <el-tabs  v-model="activeName" >
                    <el-tab-pane label="注册" name="first" >
                        <el-form ref="form" :model="registerForm"  label-width="85px">
                            <el-form-item label="账户："  prop="iuserName">
                                <el-input v-model="registerForm.iuserName"></el-input>
                            </el-form-item>
                            <el-form-item label="昵称："  prop="nickName">
                                <el-input  v-model="registerForm.inickName" ></el-input>
                            </el-form-item>
                            <el-form-item label="密码："  prop="ipassWord">
                                <el-input type="password" v-model="registerForm.ipassWord" ></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码："  prop="passWordCheck">
                                <el-input  type="password" v-model="passWordCheck" ></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱"  prop="email">
                                <el-input  v-model="registerForm.email" ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="register" round style="width:200px;">注册</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="登录" name="second">
                        <el-form ref="form" :model="loginForm"  label-width="85px">
                            <el-form-item label="用户名："  prop="userName">
                                <el-input v-model="loginForm.userName"></el-input>
                            </el-form-item>
                            <el-form-item label="密码："  prop="passWord">
                                <el-input type="password" v-model="loginForm.passWord" ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="login" round style="width:200px;">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
                </div>
            </div>
        </div>
</template>
<script>
import {mapActions} from 'vuex';
export default {
  name: 'login',
  data () {
      return{
        loginForm: {
            userName: '',
            passWord: '',
        },
        passWordCheck: '',
        registerForm: {
            iuserName: '',
            ipassWord: '',
            irole:'user',
            email:'',
            inickName: '',
        },
        activeName: 'second',
        count: 0
      };
  },
  methods: {
        login: function () {
            console.log(this.loginForm.userName + this.loginForm.passWord);
            var params = new URLSearchParams();
            params.append('username', this.loginForm.userName);
            params.append('password', this.loginForm.passWord);

            this.$axios({
                method: 'post',
                url:'http://localhost:8080/login.do',
                data: params
            }).then((response)=>{
                console.log(response.data);
                if(response.data.success == "true" )
                {
                    this.$store.commit('ADD_COUNT', response.data.data.userName);
                    this.$store.commit('ADD_NICK', response.data.data.nickName);
                    if(response.data.data.role == "manager")
                    {
                        this.$router.push(
                        {name: 'index',
                        query: {
                          user: this.loginForm.userName,
                         }
                        });
                    }else{
                        this.$router.push(
                        {name: 'userindex',
                        query: {
                          user: this.loginForm.userName,
                         }
                        });
                    }
                }
                else{
                    this.count++;
                    if(this.count == 3)
                    {
                       alert("密码错误3次，账号已被锁定");
                       this.count=0;
                    }
                    else{
                        alert("密码已经输错"+this.count+"如密码错误超过3次账号将被锁定");
                    }
                }
            })
            .catch(function (error) {
              console.log(error);
            });

        },

        register: function () {
            console.log(this.registerForm.ipassWord + "ppx "+this.passWordCheck)
            if(this.registerForm.ipassWord != this.passWordCheck){
                alert("两次密码一样");
            }
            else{
                var params = new URLSearchParams();
                params.append('username', this.registerForm.iuserName);
                params.append('nickname', this.registerForm.inickName);
                params.append('password', this.registerForm.ipassWord);
                params.append('email', this.registerForm.email);
                params.append('role', this.registerForm.irole);
                this.$axios({
                    method: 'post',
                    url:'http://localhost:8080/register',
                    data: params
                }).then((res)=>{
                    console.log(res.data);
                    if(res.data.success == "true" )
                    {
                       alert("注册成功");
                    }
                    else{
                        alert("该账户以存在，请重新注册")
                    }
                })
                .catch(function (error) {
                console.log(error);
                });
            }

        }
  }
}
</script>

<style scoped>
.login{
    width: 100vw;
    height: 100vh;
    background: url(../../images/cal2.jpg) no-repeat ;
    background-size: 100% 100%;
    
}
.login-title{
    width: 100%;
    padding-top:10%; 
}
.bezef{
    width: 350px;
    /* height: 450px;
    min-height: 300px; */
    max-width: 350px;
    margin-left: 70%;
    border-radius: 10px;
    padding: 10px 20px 10px 10px;
    background-color: #ffffff;
}
.title{
    text-align: center;
    color: #0000CD;
    font-size: 20px;
}
</style>
